<template>
    <div class="conainer">
        <van-nav-bar title="满仓设备" left-arrow @click-left="onClickLeft">
        </van-nav-bar>
        <div class="contain">
            <text v-if="totalSize == 0">暂无数据</text>
            <template v-else v-for="(item, index) in totallist" :key="index">
                <div class="item">
                    <div class="title">
                        <text style="color:#2266D5;font-weight: 600;">{{ item.address }}</text>
                        <text :style="item.is_status == 0 ? 'color:#FF1C18' : 'color:#31B74F'">{{
                            item.is_status == 0 ? '离线' : '在线' }}</text>
                    </div>
                    <div class="it">
                        <text>设备编号</text>
                        <text class="teo">{{ item.code }}</text>
                    </div>
                    <div class="it">
                        <text>实时重量</text>
                        <text class="teo">{{ item.now_weight }}</text>
                    </div>
                    <div class="it">
                        <text>满仓时间</text>
                        <text class="teo">{{ item.last_use_time.replace(/-/g, ".").replace("T", " ")
                        }}</text>
                    </div>
                </div>
            </template>
        </div>
        <van-overlay :show="show">
            <div class="wrapper">
                <div class="box_mo">
                    <div class="title">
                        确定为设备{{ name }}添加一条新的清运记录吗
                    </div>
                    <div class="but">
                        <button @click="AddWork">是</button>
                        <button @click="show = false">否</button>
                    </div>
                    <img @click="show = false" src="../../assets/clearAndRemoveList/x.png" alt="">
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { getFullyEquipment, } from '@/api/RemoveList';
const show = ref(false)

const addClearList = (v) => {
    console.log(v.code);
    name.value = v.code
    show.value = true
}
const onClickLeft = () => history.back();
// let pageIndex = ref(1)
// let pageSize = ref(4)
let totallist = ref([])
let list = ref([])
let totalSize = ref(0)
const getlist = () => {
    // const data = {
    //     pageIndex: pageIndex.value,
    //     pageSize: pageSize.value
    // }
    getFullyEquipment()
        .then(res => {
            if (res.data.code == 200) {
                list.value = res.data.dataset.list
                totallist.value = totallist.value.concat(list.value);
                totalSize.value = res.data.dataset.totalSize
            }
        })
}
getlist()
// window.addEventListener('scroll', () => {
//     const totalHeight = document.documentElement.scrollHeight;
//     const scrollTop = window.scrollY || window.pageYOffset;
//     const scrollLeft = window.scrollX || window.pageXOffset;
//     const Height = window.innerHeight
//     console.log();

//     if (totalHeight - scrollTop - Height - 10 < 0) {
//         pageIndex.value = pageIndex.value + 1
//         getlist()
//         console.log(1);

//     }

// });


</script>

<style lang="less" scoped>
:deep(#app,
    html,
    body) {
    height: 100vh !important;
}

:deep(.van-search__content) {
    background: #EBEBEB;
}

.conainer {
    height: 100vh;
    background: #f9f9f9;
}

.contain {
    background: #f9f9f9 !important;
    padding: 0 5vw;
    box-sizing: border-box;
    margin-top: 5vh;
}

.van-nav-bar {
    background-color: #fff !important;
}

:deep(.van-icon,
    .van-badge__wrapper) {
    color: #000 !important;
}

.item {
    margin: 0 4vw;
    margin-top: 1vh;
    height: 28vh;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 1em;
    box-shadow: 1px 3px 6px #e7e5e5;
    padding: 2vh 4vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-bottom: 5vh;

    .title {
        display: flex;
        justify-content: space-between;
        padding-bottom: 2vh;
        border-bottom: 1px dashed #8e8e8e80;
    }

    .it {
        display: flex;
        justify-content: space-between;
        color: #716E72;
        font-size: 0.9em;
    }

    .teo {
        color: #000;
    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.box_mo {
    position: relative;
    background-color: #fff;
    width: 75vw;
    box-sizing: border-box;
    padding: 5vh 15vw;

    img {
        position: absolute;
        bottom: -10vh;
        left: 50%;
        transform: translateX(-50%);
        width: 5vh;
    }

}

.box_mo .title {
    font-size: 0.8em;
    font-weight: 600;
}

.but {
    margin-top: 3vh;
    display: flex;
    justify-content: space-between;

    button {
        width: 45%;
        height: 5vh;
        border-radius: 1em;
        border: 2px solid #3390EE;
        background: #fff;
        font-weight: 600;
        color: #3390EE;
    }


}
</style>